import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class BookIntroTop extends Component {
    render(){
        const {detail} = this.props
        return(
            <div className="bookInfo">
                <div className="searchResult">
                    <div className="leftCover">
                        <img src={'http://statics.zhuishushenqi.com'+detail.detail.cover} alt={detail.title}/>
                    </div>
                    <div className="rightIntro">
                        <div className="title">
                            {detail.detail.title}
                        </div>
                        <div className="authorAndType">
                            <span className="author">
                                {detail.detail.author}
                            </span>|
                            <span className="cat">
                                {detail.detail.cat}
                            </span>|
                            <span className="fontNumber">
                                {detail.detail.wordCount}
                            </span>
                        </div>
                    </div>
                    <div className="updateTime">
                        {detail.detail.updated}
                    </div>
                </div>
                <div className="bookBtnWrap">
                    <div className="buttonCheckNew bookIntroBtn">
                        <i className="fa fa-plus" aria-hidden="true"></i>
                        追更新
                    </div>
                    <Link to={`/read/${detail.detail._id}/0`}>
                        <div className="buttonStartRead bookIntroBtn">
                            开始阅读
                        </div>
                    </Link>
                </div>
                <div className="bookThreeMajor clearFix">
                    <div className="bookIntroColunm">
                        <p>追书人气</p>
                        <p>{detail.detail.latelyFollower}万</p>
                    </div>
                    <div className="bookIntroColunm">
                        <p>读者留存率</p>
                        <p>{detail.detail.retentionRatio}%</p>
                    </div>
                    <div className="bookIntroColunm">
                        <p>日更字数/天</p>
                        <p>{detail.detail.serializeWordCount>0?detail.detail.serializeWordCount:0}</p>
                    </div>
                </div>
                <div className="bookIntroDesc clearFix">
                    {detail.detail.longIntro}
                </div>
            </div>
        )
    }
}